<template>
  <div ref="headerRef" class="sim-var-table-header g-flex g-ov-hidden">
    <div
      v-for="(col, index) in columns"
      :key="col.name"
      class="sim-var-table-header-col"
      :style="{ flex: col.width ? `0 0 ${col.width}px` : 1 }"
    >
      {{ $t(col.label) }}
      <div
        v-if="indragging && index !== columns.length - 1"
        class="drag-line"
        @mousedown="handleMouseDown($event, col)"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Ref, inject, onMounted, ref, watch } from "vue";
import { VarTableColumn } from "@/constants/types";

const headerRef = ref<HTMLDivElement>();
const columns = inject("columns") as Ref<VarTableColumn[]>;

withDefaults(
  defineProps<{
    indragging?: boolean;
  }>(),
  {
    indragging: true,
  }
);

onMounted(() => {
  if (headerRef.value) {
    // 获取初始化列宽
    const width = headerRef.value.clientWidth / 2;
    for (let i = 0; i < columns.value.length; i++) {
      const col = columns.value[i];
      col.width = width;
    }
  }
});

watch(() => columns.value, (cols, prev) => {
  if (!prev || cols.length !== prev.length) {
    // 列改变时，初始化列宽
    if (headerRef.value) {
      const width = headerRef.value.clientWidth / cols.length;
      for (let i = 0; i < cols.length; i++) {
        const col = cols[i];
        col.width = width;
      }
    }
  }
});

let indraggingSign = false;
const handleMouseDown = (event: MouseEvent, col: VarTableColumn) => {
  let mouseStartX = event.clientX;
  indraggingSign = true;
  let width = col.width || ((event.currentTarget as HTMLDivElement).parentNode as HTMLDivElement).clientWidth;

  const handleMouseMove = (event: any) => {
    if (width) {
      const cha = event.clientX - mouseStartX;
      const value = width + cha;
      col.width = value;
      width = value;
      mouseStartX = event.clientX;
    }
  };

  const handleMouseUp = () => {
    indraggingSign = false;
    window.removeEventListener("mousemove", handleMouseMove);
    window.removeEventListener("mouseup", handleMouseUp);
  };

  window.addEventListener("mousemove", handleMouseMove);
  window.addEventListener("mouseup", handleMouseUp);
};
</script>

<style lang="scss">
@import "@/assets/css/app.scss";

.sim-var-table-header {
  display: flex;
  align-items: center;
  min-height: 24px;
  background-color: #f5f6f7;
  border-bottom: 1px solid $black-e0;

  .sim-var-table-header-col {
    flex: 1;
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
    font-weight: 400;
    font-size: 11px;
    color: #000000;
    padding: 3px 10px;
    box-sizing: border-box;

    &:not(:first-child) {
      border-left: 1px solid $black-e0;
    }

    .drag-line {
      position: absolute;
      right: -1px;
      height: 100%;
      width: 2px;
      top: 0px;
      background-color: #e0e0e0;
      z-index: 999;
      opacity: 0;
      cursor: col-resize;

      &:active {
        background-color: #a2b3cd;
        opacity: 1;
      }
    }
  }
}
</style>
